<template>
  <div>
          <div class="filter-line b-b-d flx-row-s-c">
        <span class="item-name">待抢注时间</span>
        <span
          v-for="(item, index) in orderStatus"
          :key="index"
          class="select-item"
          :class="[
            item.select ? 'active' : 'normal',
            index < orderStatus.length - 1 ? 'mg-r-25' : '',
          ]"
          >{{ item.name }}</span
        >
        <span class="item-name">兑换时间</span>
        <Input
          v-model.trim="test"
          placeholder=""
          maxlength="30"
          style="width: 120px"
        />
        <div class="two-input-middle"></div>
        <Input
          v-model.trim="test"
          placeholder=""
          maxlength="30"
          style="width: 120px"
        />
        <div
          class="user-strong-button line-button-size"
          style="margin: 0 10px 0 30px"
        >
          搜索
        </div>
        <div class="user-normal-button line-button-size">重置</div>
      </div>
      <div class="filter-line search-result-line flx-row-bw-c">
        <span class="c-g f-14">搜索结果<span class="c-o">（2000）</span></span>
      </div>
      <table class="table-area">
        <thead>
          <tr>
            <th><div class="line-style">序号</div></th>
            <th><div class="line-style">兑换礼物</div></th>
            <th><div class="line-style">数量</div></th>
            <th><div class="line-style">使用积分</div></th>
            <th><div class="line-style">兑换时间</div></th>
            <th><div class="line-style">状态</div></th>
            <th><div class="line-style">操作</div></th>
          </tr>
        </thead>
        <tbody>
          <tr class="lc-f">
            <td>
              <div class="line-style"><span class="normal-f">1</span></div>
            </td>
            <td>
              <div class="line-style flx-row-s-c" style="padding: 10px 0;">
                <div class="form-img"></div>
                <span class="normal-f" style="white-space: pre-wrap;word-break: break-all;">mmjimjimjimjimjiji.cn</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">1</span>
              </div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">100</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">2021-03-09 16:47:36</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">待发货</span></div>
            </td>
            <td>
              <div class="line-style normal-f">
                <div class="form-font-button">确认收货</div>
                <div class="form-font-button">详情</div>
              </div>
            </td>
          </tr>
          <tr class="lc-F9FAFB">
            <td>
              <div class="line-style"><span class="normal-f">1</span></div>
            </td>
            <td>
              <div class="line-style flx-row-s-c" style="padding: 10px 0;">
                <div class="form-img"></div>
                <span class="normal-f" style="white-space: pre-wrap;word-break: break-all;">mmjimjimjimjimjiji.cn</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">1</span>
              </div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">100</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">2021-03-09 16:47:36</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">待发货</span></div>
            </td>
            <td>
              <div class="line-style normal-f">
                <div class="form-font-button">确认收货</div>
                <div class="form-font-button">详情</div>
              </div>
            </td>
          </tr>
          <tr class="lc-f">
            <td>
              <div class="line-style"><span class="normal-f">1</span></div>
            </td>
            <td>
              <div class="line-style flx-row-s-c" style="padding: 10px 0;">
                <div class="form-img"></div>
                <span class="normal-f" style="white-space: pre-wrap;word-break: break-all;">mmjimjimjimjimjiji.cn</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">1</span>
              </div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">100</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">2021-03-09 16:47:36</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">待发货</span></div>
            </td>
            <td>
              <div class="line-style normal-f">
                <div class="form-font-button">确认收货</div>
                <div class="form-font-button">详情</div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="form-page-bottom-area flx-row-e-c">
        <Page :total="40" show-elevator show-sizer show-total />
      </div>
    
  </div>
</template>

<script>
export default {
  name: "VipPointsOrder",
  data() {
    return {
      breadCrumb: [{ name: "积分订单" }],
      tablist: [
        {
          name: "积分订单",
          to: "/user/mypoints/pointsorder",
        },
      ],
      orderStatus: [
        {
          name: "全部",
          select: true,
        },
        {
          name: "待发货",
          select: false,
        },
        {
          name: "待收货",
          select: false,
        },
        {
          name: "已完成",
          select: false,
        },
      ],
      test: "",
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.mg-r-25 {
  margin-right: 25px;
}
.form-img {
  @include size(48px);
  @include bg-setting(null, cover, center);
  background-color: #F7F7F7;
  margin-right: 10px;
  flex-shrink: 0;
}
</style>